<template>
	<GlobalBG title="帮助与反馈" :showHeader="true" :showBack="true">
		<view class="container">
			<view class="tab-container">
				<uni-segmented-control :current="current" :values="tabList" style-type="button" active-color="#2263BF"
					@clickItem="onClickItem" />
			</view>
			<view class="box" v-if="current==0">
				<uni-collapse>
					<uni-collapse-item title="如何查看视频监控？" :show-animation="true">
						<view class="content-collapse">
							<text class="text">在视频监控页面，您可以通过组织树或场景筛选来查看不同区域的视频。点击视频卡片可以查看实时画面。</text>
						</view>
					</uni-collapse-item>
					<uni-collapse-item title="如何查看各类场景？" :show-animation="false">
						<view class="content-collapse">
							<text class="text">在视频监控页面，您可以通过组织树或场景筛选来查看不同区域的视频。点击视频卡片可以查看实时画面。</text>
						</view>
					</uni-collapse-item>
					<uni-collapse-item title="如何查看事件处置进度？" :show-animation="false">
						<view class="content-collapse">
							<text class="text">在视频监控页面，您可以通过组织树或场景筛选来查看不同区域的视频。点击视频卡片可以查看实时画面。</text>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="box" v-if="current==1">
				<uni-forms ref="formRef" :modelValue="formData" @submit="onSubmit" label-width="100">
					<view class="module">
						<uni-forms-item label="反馈类型" name="faultType" class="select-popup" required
							:rules="[{ required: true, errorMessage: '请选择反馈类型类型' }]">
							<view class="fault-type-picker" @click="faultTypePopup.open()">
								<text v-if="formData.faultType" style="margin-left: auto">
									{{
                  faultTypeList.find(
                    (item) => item.value === formData.faultType
                  )?.text
                }}
								</text>
								<text v-else class="placeholder" style="margin-left: auto">请选择</text>
								<uni-icons type="arrowright" size="18" color="#d7d7da"></uni-icons>
							</view>
							<SelectPopup ref="faultTypePopup" :items="faultTypeList" :value="formData.faultType"
								@select="selectFaultType" />
						</uni-forms-item>
						<uni-forms-item label="联系方式" name="tel" class="select-popup">
							<view class="fault-type-picker">
								<uni-easyinput :inputBorder="false" v-model="formData.tel"
									placeholder="请输入"></uni-easyinput>
								<uni-icons type="arrowright" size="18" color="#d7d7da"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="" name="faultDesc" class="textarea-desc">
							<textarea v-model="formData.faultDesc" placeholder="请输入建议" :maxlength="1000" />
						</uni-forms-item>

					</view>


				</uni-forms>

			</view>
			<button type="submit" class="submit-btn">提交</button>
		</view>
	</GlobalBG>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	let current = ref(0)
	let tabList = ref([
		'帮助',
		'反馈'
	])
	// 切换
	const onClickItem = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}

	const formData = ref({
		faultType: "",
		faultDesc: "",
		tel: ""
	});
	const rules = ref({
		faultType: { required: true, message: "请选择故障类型" },
		faultDesc: { required: true, message: "请输入故障描述" },
	});
	const faultTypePopup = ref();
	const faultTypeList = ref([
		{ value: "hardware", text: "功能建议" },
		{ value: "software", text: "bug" },
	]);
	const selectFaultType = (item : { value : string; text : string }) => {
		formData.value.faultType = item.value;
	};
	const onSubmit = async () => {
		const isValid = await (formData.value.formRef as any).validate();
		if (isValid) {
			console.log("提交数据：", formData.value, imageList.value, videoList.value);
			uni.showToast({ title: "提交成功", icon: "success" });
		}
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		padding-top: 20rpx;

		.tab-container {
			width: 346rpx;
			height: 54rpx;
			padding-left: 28rpx;

			.segmented-control--button {
				height: 54rpx;
			}
		}

		.box {
			margin: 0 28rpx;
			margin-top: 20rpx;
			padding: 19rpx 28rpx;
			background: #fff;
			border-radius: 15rpx;

			.uni-collapse-item__title-box {
				padding: 0;
			}

			.content-collapse {
				padding: 20rpx 25rpx;
				background: rgba(228, 239, 253, 0.6);
				border-radius: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #666666;
				line-height: 38rpx;

				.text {
					padding-bottom: 20rpx;
				}
			}

			.uni-forms {
				flex: 1;
				overflow: auto;

				.module {
					.uni-forms-item {
						padding-left: 0;
						padding-right: 0;

						.uni-input-placeholder {
							padding-right: 12rpx;
							text-align: right;
							font-size: 30rpx;
						}

						.uni-input-input {
							text-align: right;
						}
						uni-textarea{
							background: #fff !important;
						}
					}
				}

				.uni-forms-item {
					margin-bottom: 20rpx;
					padding: 20rpx;

					&.item-bg {
						background: #ffffff;
						box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 12, 39, 0.06);
						border-radius: 20rpx;
						padding: 30rpx 30rpx 100rpx 30rpx;

						:deep(.uni-forms-item__content) {
							position: static;
						}
					}

					.tip {
						font-size: 24rpx;
						color: #999;
						display: block;
						margin-top: 10rpx;
					}
				}

				.fault-type-picker {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10rpx 0;
					color: #666;
					font-size: 28rpx;
				}
			}


		}

		.submit-btn {
			margin: 40rpx 28rpx;
			margin-top: 40rpx;
			height: 90rpx;
			line-height: 90rpx !important;
			background: #2263BF;
			border-radius: 12rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #ffffff;
		}

	}
</style>